﻿define([
    'views/baseView',
    'models/crud/userModel',
    'text!templates/crud/mngBase.html',
    'text!templates/crud/mngTable.html',
    'text!templates/crud/user/super/userList.html',
], function (BaseView, Model, BaseTmp, TableTmp, UniqTmp) {

    var view = BaseView.extend({

        $content: null,
        $table: null,

        render: function () {
            toggleLoading(true);
            $("div[data-rel='crud_user']").remove();
            var that = this;

            changeTopNavTitle("_administration");

           (new Model()).list(undefined, function (dataUser) {
                var baseTemplate = Handlebars.compile(BaseTmp);
                var tableTemplate = Handlebars.compile(TableTmp);
                var uniqTemplate = Handlebars.compile(UniqTmp);

                var dataBaseOptions = {
                    uuId: that._uId,
                    dataRel: "crud_user", //
                    tmpClass: "user_manager", // 
                    title: translate("_userManager"),
                    subtitle: translate("")
                };
                var dataTableOptions = {
                    column:[{
                        colText: translate("_name"),
                        style: "width: 279px;",
                        ariasort: true,
                        ariaLabel: "_nameOfTheUser"
                    },{
                        colText: translate("_login"),
                        style: "width: 350px;",
                        ariasort: true,
                        ariaLabel: "_loginOfTheUser"
                    },{
                        colText: translate("_email"),
                        style: "width: 322px;",
                        ariasort: true,
                        ariaLabel: ""
                    },{
                        colText: translate("_companies"),
                        style: "width: 322px;",
                        ariasort: true,
                        ariaLabel: "_companiesOfTheUser"
                    }, {
                        colText: translate("_active"),
                        style: "width: 241px;",
                        ariasort: true,
                        ariaLabel: "_activateOrDeactivateUser"
                    }, {
                        colText: translate("_options"),
                        style: "width: 241px;",
                        ariasort: false,
                        ariaLabel: "_generalOptions"
                    }]
                };
                var dataUniqOptions = {
                    data: dataUser
                };

                // crud_tbody_content

                var html = baseTemplate(dataBaseOptions);
                var html2 = tableTemplate(dataTableOptions);
                var html3 = uniqTemplate(dataUniqOptions);

                that.$el.append(html);
                that.$el.find(".table_container").append(html2);
                that.$el.find("tbody.crud_tbody_content").append(html3);

                that.$content = $("div[data-id='" + that._uId + "']");
                that.$table = that.$content.find("table");
                postRender(that.$el);
                
                that.$table.customTable();

                //$('<a href="#" class="btn btn-adduser"><i class="icon-plus"></i></a>').appendTo('div.data-table-options');

                that.addTableHandlers();
                that.addHandlers();

                toggleLoading(false);
            });
        },
        edit: function (e) {
            var id = $(e.currentTarget).closest("tr").attr("data-id");

            require(['controllers/abmManagers/userManager'], function (Controller) {
                (new Controller()).showEdit(id);
            });
        },
        editPreferences: function (e) {
            var id = $(e.currentTarget).closest("tr").attr("data-id");

            require(['controllers/acrud/userMngr'], function (Controller) {
                (new Controller()).showEditPref(id);
            });
        },
        deleteData: function (e) {
            var id = $(e.currentTarget).closest("tr").attr("data-id");

            require(['controllers/common/showModal'], function (Controller) {
                (new Controller()).show(
                    {
                        title: translate("_deleteUser"),
                        text: translate("_sure_delete_user"),
                        buttons: [
                            { "title": translate("yes"), "css": "primary", "code": "yes" },
                            { "title": translate("no"), "code": "no" }
                        ],
                        callback: function (code) {
                            if (code == "yes") {
                                toggleLoading(true);
                                var model = new Model();
                                model.deleteData(id, function () {
                                    require(['controllers/crud/userMngr'], function (Controller) {
                                        (new Controller()).show();
                                        toggleLoading(false);
                                    });
                                });
                            }
                        }
                    });
            });
        },
        changeState: function (e) {
            var userId = +$(e.currentTarget).closest("tr").attr("data-id");
            var state = $(e.currentTarget).val();
            var model = new Model();
            var user = {
                userId: userId,
                active: state
            }
            // se puede usar el update y nadas mas.. <<<<<<<<<<<
            //modelUser.getUser(userId, function (dataUser) {
            //    dataUser.active = !dataUser.active;
            //    var data = {
            //        user: dataUser
            //    }
            model.Update(user, function () {
                // todo, avisar del cambio al usuario?
            });
            //});
        },
        addData: function (element) {
            require(['controllers/crud/userMngr'], function (Controller) {
                (new Controller()).addData(element);
            });
        },
        close: function () {
            var key = $("#currentTask").attr("data-rel");
            require(['controllers/home/home'], function (Controller) {
                (new Controller()).removeTask(key);
            });
        },
        addTableHandlers: function () {
            this.$table.find("button.btn-edit").on("click", this.edit);
            this.$table.find("button.btn-preference").on("click", this.editPreferences);
            this.$table.find("input.user-state").on("click", this.changeState);
            this.$table.find("button.btn-delete").on("click", this.deleteData);
        },
        addHandlers: function () {
            //this.$content.find("button.btn_add").on("click", this.addData);
            this.$content.find("button.btn_add").on("click", $.proxy(function () {
                this.addData(this.$el);
                return false;
            }, this));
            //$content.find("div.data-table-options a.btn-addData").on("click", this.addData);
            this.$content.find("div.abm-top-options a.btn-close").on("click", this.close);
        }
    });
    return view;
});